import { createStyles } from 'antd-style';

export const useStyle = createStyles(({ token }) => {
  console.log(token);
  return {
    container: {
      boxSizing: 'border-box',
      padding: '20px 0',
      height: '100%',
      ['.group-menu_title']: {
        userSelect: 'none',
        height: token.controlHeight,
        display: 'flex',
        alignItems: 'center',
        padding: '0 20px',
        borderRadius: token.borderRadius,
        width: 110,
        boxSizing: 'border-box',
      },
      ['.group_title']: {
        fontSize: 14,
        fontWeight: 600,
        color: token.colorTextHeading,
      },
      ['.item_title']: {
        fontSize: 12,
        fontWeight: 500,
        color: token.colorTextLabel,
        cursor: 'pointer',
        ['&:hover']: {
          color: token.colorPrimaryTextHover,
        },
        ['&.active']: {
          color: token.colorPrimaryTextHover,
          backgroundColor: token.colorPrimaryBgHover,
        },
      },
    },
  };
});
